<template>
    <div class="video-container" >
        <video-player id="videoinfo" class="video-player-box"
                      ref="videoPlayer"
                      :options="playerOptions"
                      :playsinline="true"
                      :progressBar="true"
                      @play="onPlayerPlay($event)"
                      @pause="onPlayerPause($event)"
                      @ended="onPlayerEnded($event)"
                      @playing="onPlayerPlaying($event)"
                      @canplay="onPlayerCanPlay($event)"
        >
        </video-player>
        <div v-if="isMobile" >
            <div  class="name-label">
                {{ teacher_name }}
            </div>
            <div class="visit-label">
                <span>{{ play_name }}</span>
            </div>
        </div>
        <div v-else>
            <div  class="name-label activeClass">
                {{ teacher_name }}
            </div>
            <div class="visit-label activeClass">{{ play_name }}</div>
        </div>
    </div>
</template>

<script>
import { getPlayInfo } from '@/api/live/liveonline';
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
    name: 'play',
    components:{
        videoPlayer
    },
    data() {
        return {
            isMobile:false,
            teacher_name:'',
            play_name:'回放中',
            teacher_img:'',
            playerOptions: {
                // videojs options
                // width:'100%',
                // height:'100%',
                height:'500',
                controls:true, //控制条是否一直显示
                autoplay: false, // 自动播放
                muted: false,  //静音
                loop: true,      // 是否视频一结束就重新开始
                volume:true,
                playsinline: true,
                progressBar: true,
                language: 'zh-CN',  // 'en' 'zh-CN', // 中文提示
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                playbackRates: [0.5, 1.0, 1.5, 2.0],// 倍速播放
                fluid : false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器
                sources: [{
                    type: "video/mp4",
                    src:""
                    //src: "https://chongchongdushu-1251993779.cos.ap-shanghai.myqcloud.com/uploads/%E6%9D%8E%E6%B4%81%E8%80%81%E5%B8%88%E7%9A%84%E8%8B%B1%E8%AF%AD%E5%90%AF%E8%92%99%E5%AE%B6%E9%95%BF%E8%AF%BE5%E6%9C%8816%E6%97%A51000.mp4"
                }],
                //poster: "/static/images/author.jpg",  //设置封面地址
                poster: "",
               // notSupportedMessage: '此视频暂无法播放，请稍后再试',  // 允许覆盖Video.js无法播放媒体源时显示的默认信息
                controlBar: {
                    timeDivider: true,           // 当前时间和持续时间的分隔符
                    durationDisplay: true,       // 显示持续时间
                    remainingTimeDisplay: true, // 是否显示剩余时间功能
                    fullscreenToggle: false,       // 是否显示全屏按钮
                    currentTimeDisplay: true,   // 当前时间
                    playToggle: true,       // 播放按钮
                    volumePanel: false,       // 静音按钮
                    processControl:true     //是否显示进度条
                }
            }
        }
    },
    created() {
        this.init();
        this.checkMobile();
    },
    mounted() {
        console.log('player height',this.playerOptions.height);
        console.log('window innerHeight',window.innerHeight);
        // this.setPlayerHeight();
        // window.addEventListener('resize', this.setPlayerHeight);
        console.log('this is current player instance object', this.player)
    },
    computed: {
        player() {
            return this.$refs.videoPlayer.player
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setPlayerHeight);
    },
    methods: {
        init() {
            // 获取直播信息
            getPlayInfo({
                liveId: this.$route.query.liveId
            }).then((res) => {
                if (res.code === 200) {

                    console.log('[control] --获取播放信息成功!', res.data);
                    this.teacher_name = res.data.name;
                    this.teacher_img = res.data.conver;
                    this.poster = res.data.conver;
                    this.playerOptions.sources[0].src = res.data.push_file_name;
                } else {
                    console.warn('[control] 获取播放信息状态失败！', res);
                }
            }).catch((err) => {
                console.error('[control] 请求获取播放信息失败！', err);
            });
        },
        setPlayerHeight() {
            this.playerOptions.height = window.innerHeight + 'px';
            this.$refs.videoPlayer.playerVue.$el.style.height = this.playerOptions.height;
        },
        checkMobile() {
            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
            this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
        },
        // 播放的回调
        onPlayerPlay(event) {
            console.log('onPlayerPlay event',event);
            this.isplay = true;
        },
        // 暂停的回调
        onPlayerPause(event) {
            console.log('onPlayerPause event',event);
            this.isplay = false;
        },
        // 结束的回调
        onPlayerEnded(event) {
            console.log('onPlayerEnded event',event);
            this.isplay = false;
        },
        // 播放中回调
        onPlayerPlaying(event) {
            console.log('onPlayerPlaying event',event);
            this.isplay = true;
        },
        onPlayerCanPlay(event) {
            console.log('video event',event);
            // 获取视频高度
            const videoHeight = event.height_;
            console.log('视频高度:', videoHeight);
            //处理逻辑
        }
    }
}
</script>

<style lang="scss" scoped>
/*@import "@/assets/css/common";*/
html,body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
/*.video-js.vjs-fluid:not(.vjs-audio-only-mode), .video-js.vjs-16-9:not(.vjs-audio-only-mode), .video-js.vjs-4-3:not(.vjs-audio-only-mode), .video-js.vjs-9-16:not(.vjs-audio-only-mode), .video-js.vjs-1-1:not(.vjs-audio-only-mode) {*/
/*    height: 659px;*/
/*}*/
.video-js .vjs-big-play-button{
    top:450px;
    left:46%;
}
.video-container {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%; /* 使容器宽度为100% */
    height: 100vh; /* 视口高度 */
    /*overflow: hidden;*/
}
.name-label {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size:13px;
    /*opacity:0.3;*/
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px;
}
.visit-label {
    position: absolute;
    top: 35px;
    left: 10px;
    font-size:13px;
    /*opacity:0.3;*/
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px;
}
.activeClass{
    left:35%;
}

</style>